<script setup lang="ts">

import PopMenu from "./popMenu.vue";
import {reactive,watch} from 'vue';
import IndexFirstBtnNavigation from "./IndexFirstBtnNavigation.vue";
import {useRoute, useRouter} from "vue-router";

const route = useRoute();
const router = useRouter();
const fetchData = (query: any) => {
  // 根据路由参数执行你的逻辑，例如获取数据
  if (query.mainTopIndexNavigation) {
    const mainTopIndexNavigation = Array.isArray(query.mainTopIndexNavigation) ? query.mainTopIndexNavigation[0] : query.mainTopIndexNavigation;
    initTopMenu(mainTopIndexNavigation);
  } else {
    console.error('mainTopIndexNavigation 没进来');
  }
};
// 立即执行一次 fetchData，并监听 route.query 的变化
watch(() => route.query, fetchData, { immediate: true });
function printNum(parentName:any,name:any,type:any){
  if(type===0){
    buttons.forEach((e)=>{
      e.showMenu=false
      if(e.label===parentName){
        e.showMenu=true;
      }
    })
  }else{
    buttons.forEach((e)=>{
      e.selected=false
      if(e.label===parentName){
        e.selected=true;
        emit('ccc', name);
      }
    })
  }
}

///点击首页
function clickFirstBtn(name:any){
  buttons.forEach((e,index)=>{
    e.selected=false;
    e.showMenu=false;
    if(e.label===name){
      e.selected=true;
      updateRoute(index);
    }
  })
  emit('ccc', name);
}
const updateRoute = (index:number) => {
  router.push({
    path: route.path,
    query: {
      ...route.query,
      mainTopIndexNavigation: index,
    },
  });
};


let buttons = reactive([
  { label: '首页', selected: false,showMenu:false },
  { label: '学', selected: false,showMenu:false },
  { label: '练', selected: false,showMenu:false },
  { label: '考', selected: false,showMenu:false },
  { label: '评', selected: false,showMenu:false },
  { label: '管', selected: false,showMenu:false },
])

function initTopMenu(indexLocal:number){
  buttons.forEach((e,index)=>{
   e.selected=false;
   if(indexLocal==index){
     buttons[indexLocal].selected=true;
   }
  });
}



const emit = defineEmits<{
  //定义一个回调方法，可以理解为回调父组件传入的attribute为ccc的方法，入参为一个number类型的变量
  (e: 'ccc', num: String): void,
}>()

</script>

<template>
  <div class="main">
    <img class="logo" src="../assets/logo.png" height="54px" width="162px" alt="Vue logo" />
    <div style="display: flex;flex-direction: row">
      <IndexFirstBtnNavigation @ccc="clickFirstBtn" :title="buttons[0].label" :selected="buttons[0].selected"></IndexFirstBtnNavigation>
    <PopMenu v-for="(element,index) in buttons.slice(1)"  @ccc="printNum"  v-model:title="element.label"  v-model:selected="element.selected" v-model:showMenuControl="element.showMenu" :index="index+1" :key="element.label"></PopMenu>
    </div>
  <div class="childStyle">
    <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
    />
    张三
    <el-dropdown>
    <span>
 <CaretBottom style="width: 1em; height: 1em; margin-right: 8px;color: #f9f9f9" />
    </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
  </div>
</template>

<style scoped>

.childStyle{
  color: #ffffff;
  display: flex;
  align-items: center;/*垂直居中对齐*/
  gap: 15px; /* 添加元素之间的间距 */
}
.main{
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;/*垂直居中对齐*/
  height: 64px;
  background:  #004170;
  padding-left: 25px;
  padding-right: 25px;
}
.childStyle[data-v-35623aff]{
 padding-right: 45px;
}

</style>